<template>
  <!-- class="center-section" -->
  <div class="banner-container" >
     <div class="main-video">
        <!-- <Left/> -->
         <div class="video-content">
          <div class="video-image" @click="openSlideUrl">
            <img :src="getImageUrl(currentSlide.bannerId)" :alt="currentSlide.title"  style="cursor: pointer"/>
          </div>
          <div class="video-overlay">
            <div class="video-title">{{ currentSlide.title }}</div>
            <div class="carousel-dots">
              <span 
                v-for="(slide, index) in state" 
                :key="slide.id"
                :class="['dot', { active: currentSlideIndex === index }]"
                @click="goToSlide(index)"
              ></span>
            </div>
          </div>
        </div>
        <div class="carousel-controls">
          <button class="carousel-btn prev" @click="prevSlide">❮</button>
          <button class="carousel-btn next" @click="nextSlide">❯</button>
        </div>
     </div>
    <div class="video-grid">
        <Right :page-size="pageSize"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import Left from './left.vue';
import Right from './right.vue';
import { useWindowSize } from '@vueuse/core'
import { imageUrl } from '@/apis/image';
const { width } = useWindowSize()
const pageSize = computed(()=>width.value<1300?4:4)
const columns = computed(()=>pageSize.value/2+2)
import { listCarousels } from '@/apis/system';
const { state, isLoading, isReady } = useAsyncState(listCarousels({ position: 'HOME'}), null)

const currentSlideIndex = ref(0);
// const slides =[
//         {
//           title: '总第95堂——西大数信教帮学堂《常微分方程》第1期',
//           image: require('../assets/1sz3p8w2Sk.png@3840w_400h_1c.webp')
//         },
//         {
//           title: '总第96堂——西大数信教帮学堂《高等代数》第2期',
//           image: require('../assets/1sz3p8w2Sk.png@3840w_400h_1c.webp')
//         },
//         {
//           title: '总第97堂——西大数信教帮学堂《数学分析》第3期',
//           image: require('../assets/1sz3p8w2Sk.png@3840w_400h_1c.webp')
//         },
//         {
//           title: '总第98堂——西大数信教帮学堂《概率论》第4期',
//           image: require('../assets/1sz3p8w2Sk.png@3840w_400h_1c.webp')
//         },
//         {
//           title: '总第99堂——西大数信教帮学堂《数值分析》第5期',
//           image: require('../assets/1sz3p8w2Sk.png@3840w_400h_1c.webp')
//         }
//       ]
const currentSlide = computed(() => {
  if (!state.value || state.value.length === 0) {
    return {
      bannerId: '',
      title: ''
    }
  }
  return state.value[currentSlideIndex.value]
})
// 获取图片URL
function getImageUrl(bannerId: string) {
  // 根据您的实际API调整图片URL构造方式
  // return `/api/resource/${bannerId}`
  return imageUrl + bannerId
}

// 切换幻灯片
function nextSlide() {
  if (!state.value || state.value.length === 0) return
  currentSlideIndex.value = (currentSlideIndex.value + 1) % state.value.length
}

function prevSlide() {
  if (!state.value || state.value.length === 0) return
  currentSlideIndex.value = currentSlideIndex.value === 0 
    ? state.value.length - 1 
    : currentSlideIndex.value - 1
}

function goToSlide(index: number) {
  currentSlideIndex.value = index
}

// 自动轮播控制
let autoPlayInterval: NodeJS.Timeout | null = null
// 启动轮播
function startAutoPlay() {
  if (autoPlayInterval) {
    clearInterval(autoPlayInterval)
  }
  
  if (state.value && state.value.length > 1) {
    autoPlayInterval = setInterval(() => {
      nextSlide()
    }, 5000)
  }
}
// 监听state变化，当数据加载完成时启动轮播
watch(() => state.value, (newVal) => {
  if (newVal && newVal.length > 0) {
    startAutoPlay()
  }
}, { immediate: true })

// onMounted(() => {
//   if (state.value && state.value.length > 1) {
//     autoPlayInterval = setInterval(() => {
//       nextSlide()
//     }, 5000)
//   }
// })
function openSlideUrl() {
  if (currentSlide.value?.url) {
    window.open(currentSlide.value.url, '_blank')
  } else {
    console.warn('当前幻灯片没有URL')
  }
}

onUnmounted(() => {
  if (autoPlayInterval) {
    clearInterval(autoPlayInterval)
  }
})
console.log('===',state)

</script>

<style scoped lang="scss">
.center-section {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(v-bind(columns), 1fr);
  grid-template-rows: repeat(2, 1fr);
  position: relative;
}
.banner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 1200px) {
  .banner-container {
    flex-direction: column;
  }

  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
.main-video {
  flex: 2;
  position: relative;
  height: 400px;
}
.video-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 15px;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
.video-grid::-webkit-scrollbar {
  width: 6px;
}

.video-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.video-grid::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.video-grid::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.video-content {
  background: #2d3748;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.video-image {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.video-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 20px;
  color: white;
}

.video-title {
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 500;
}

.carousel-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: white;
  width: 24px;
  border-radius: 4px;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  // padding: 0 20px;
  pointer-events: none;
  right: 0;
  left: 0;
}

.carousel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

</style>